<template>
  <el-container>
    <el-header>
      <div>
        <img src="../assets/logo.png"/>
        <h1>电商后台管理系统</h1>
      </div>
      <div>
        <el-button class="logout" type="info" plain @click="logoutFun">注销</el-button>
      </div>
    </el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            :default-active="activePath"
            :router="true"
            @select="selectFun"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/userlist">用户列表</el-menu-item>
            <el-menu-item index="1-2">用户添加</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><location /></el-icon>
              <span>权限管理</span>
            </template>
            <el-menu-item index="2-1">权限列表</el-menu-item>
            <el-menu-item index="2-2">权限添加</el-menu-item>
            <el-menu-item index="2-3">权限修改</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><location /></el-icon>
              <span>角色管理</span>
            </template>
            <el-menu-item index="3-1">角色列表</el-menu-item>
            <el-menu-item index="3-2">角色添加</el-menu-item>
          </el-sub-menu>
          <el-sub-menu index="4">
            <template #title>
              <el-icon><location /></el-icon>
              <span>支付管理</span>
            </template>
            <el-menu-item index="/paylist">支付列表</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>

import {testFun} from "../api/test.js";

export default {
  name:'Index'
  ,data(){
    return {
      activePath: "/index"
    }
  }
  ,methods:{
    logoutFun(){
      sessionStorage.removeItem("token")
      window.location.href = '/login'
    },
    handleOpen(key,keyPath){

    },
    handleClose(key,keyPath){

    },
    selectFun(index,indexPath){
      console.log(index)
      console.log(indexPath)
    },
    async testFun(){
      let data = await testFun()
      console.log(data)
    }
  }
}
</script>
<style scoped>
.el-container{
  width: 100%;
  height: 100%;
//background-color: #bfbfbf;
}
.el-menu{
  //background-color: black;
}
.el-sub-menu{
  color: white;
}
.el-container>.el-aside{
  height: 100%;
  //background-color: black;
}

.el-container > .el-header{
  display: flex;
  justify-content: space-between;
  min-height: 80px;
  height: 10%;
  width: 100%;
  background-color: black;
}
.el-header> div{
  display: flex;
}
.logout{
  margin: 20px;
}
.el-header> div > img {
  margin: 10px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.el-header> div > h1{
  margin-top:20px ;
  color: white;

}
</style>